<template>
  <view class="nav-bar">
    <scroll-view
      class="custom-nav relative flex flex-row items-center justify-start overflow-x-hidden overflow-y-visible px-32rpx pt-10rpx"
      :scroll-x="true" :show-scrollbar="false" scroll-with-animation :scroll-left="lineBoxLeft">
      <div v-for="(item, index) in navData" :key="index" class="nav relative z-99 mr-88rpx h-73rpx text-center text-30rpx"
           :class="{ 'font-600 text-38rpx change-nav': navIndex === item.id }" @click="changeNav(index, item)">
        {{ item.name }}
        <template v-if="navIndex === item.id">
          <image
            :src="`${cdnUrl}/imgs/square/selected.png${imgVersion}`"
            mode="scaleToFill"
            class="absolute left-0 h-40rpx w-72rpx -bottom-3rpx"
          />
        </template>

      </div>
    </scroll-view>
  </view>
</template>

<script setup>
const props = defineProps({
  navData: { type: Array, default: () => [] },
  curIndex: { type: Number, default: 2 },
  type: { type: String, default: '' },
})

const emits = defineEmits(['handleSwitchBar'])
let lineBoxLeft = $ref(0)
let navIndex = props.curIndex
const changeNav = (index, item) => {
  if (props.type === 'mall') {
    moveLeftBoxMall(index)
  } else if (props.type === 'point') {
    moveLeftBoxpoint(index)
  } else {
    moveLeftBox(index)
  }
  navIndex = item.id
  emits('handleSwitchBar', item)
}

const moveLeftBox = (index) => {
  if (index > 3 && index < props.navData.length - 1) {
    lineBoxLeft = (index - 2) * 75
  } else if (index <= 3) {
    lineBoxLeft = 0
  }
}
const moveLeftBoxMall = (index) => {
  if (index > 2 && index < props.navData.length - 1) {
    lineBoxLeft = (index - 2) * 135
  } else if (index <= 2) {
    lineBoxLeft = 0
  }
}
const moveLeftBoxpoint = (index) => {
  if (index > 1 && index < props.navData.length - 1) {
    lineBoxLeft = (index - 1) * 135
  } else if (index < 2) {
    lineBoxLeft = 0
  }
}

defineExpose({
  changeNav,
})
</script>

<style lang="scss">
.nav-bar {
  height: 100rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  ::-webkit-scrollbar{
    display: none;
  }

  .title-bg {
    background: url('https://qqy-1254346585.cos.ap-nanjing.myqcloud.com/qqy/imgs/square/selected.png') no-repeat bottom;
    background-size: 100%;
  }

  .custom-nav {
    display: flex;
    white-space: nowrap;

    ::v-deep .uni-scroll-view {
      position: relative;
      -webkit-overflow-scrolling: touch;
      width: 100%;
      height: 100%;
      max-height: inherit;
    }

    .nav {                     // 未选中字体样式
      display: inline-block;
      font-size: 30rpx;
    }

    .change-nav{
      display: inline-block;
      font-size: 38rpx;
    }
  }
}
</style>
